<template>
  <div class="wrap">
    <div style="margin-bottom:10px;">
      <el-date-picker
        :editable="false"
        v-model="dateValue"
        style="width:150px;"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        placeholder="选择日期"
        @change="dateChange">
      </el-date-picker>
      <!-- <el-select v-model="systemValue" placeholder="系统" class="select" style="width:150px;" @change="systemChange">
        <el-option
          v-for="item in systemOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <el-switch
        v-model="newUserSwitch"
        active-text="仅看新用户"
        @change="newUserSwitchChange">
      </el-switch>
      <el-button icon="el-icon-refresh" @click="refreshClick" style="margin-left:20px;">刷新</el-button>
    </div>
    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
          align="center"
          type="index"
          width="40">
      </el-table-column>
      <el-table-column
          align="center"
          width="110"
          prop="channelName"
          label="渠道名">
      </el-table-column>
      <el-table-column align="center" label="实名校验">
        <el-table-column
          align="center"
          width="100"
          label="需要实名数|注册|登录|实名|实名率">
          <template slot-scope="scope">
            <p>{{scope.row.needCheckRegisterNum || 0}} | {{scope.row.checkRegisterNum || 0}} | {{scope.row.checkLoginNum || 0}} | {{scope.row.checkNum || 0}} | {{isNaN((scope.row.checkNum*100/scope.row.needCheckRegisterNum).toFixed(1)) ? '-' : ((scope.row.checkNum*100/scope.row.needCheckRegisterNum).toFixed(1))+'%'}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="结算转化">
        <el-table-column
          align="center"
          :label="`结算注册|注册率|扣量比 ${this.tab.registerPayTotal || 0} | ${this.tab.registerRateTotal ? this.tab.registerRateTotal+'%' : '-'} | ${this.tab.deductionRatioTotal ? this.tab.deductionRatioTotal+'%' : '-'}`"
          :render-header="renderHeader3">
          <template slot-scope="scope">
            <span>{{scope.row.settlementRegisterNum || 0}} | {{isNaN((scope.row.settlementRegisterNum*100/scope.row.uvNum).toFixed(1)) ? '-' : ((scope.row.settlementRegisterNum*100/scope.row.uvNum).toFixed(1))+'%'}} | {{isNaN(((scope.row.registerNum-scope.row.settlementRegisterNum)*100/scope.row.registerNum).toFixed(1)) ? '-' : (((scope.row.registerNum-scope.row.settlementRegisterNum)*100/scope.row.registerNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
           width="100"
          :label="`UV单价|CPA ${this.tab.uvPriceAve || 0} | ${this.tab.cpaPriceAve || 0}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span v-if="scope.row.settlementType">{{ scope.row.settlementPrice }} </span>
            <span v-else>{{ isNaN((scope.row.settlementPrice*scope.row.settlementRegisterNum/scope.row.uvNum).toFixed(1)) ? '0.0' : (scope.row.settlementPrice*scope.row.settlementRegisterNum/scope.row.uvNum).toFixed(1) }} </span>
            <span>| {{ isNaN((scope.row.settlementPrice*scope.row.settlementRegisterNum/scope.row.registerNum).toFixed(1)) ? '0.0' : (scope.row.settlementPrice*scope.row.settlementRegisterNum/scope.row.registerNum).toFixed(1)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
           width="100"
          :label="`UV|PV ${this.tab.uvNumTotal || 0} | ${this.tab.pvNumTotal || 0}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span>{{scope.row.uvNum || 0}} | {{scope.row.pvNum || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="`渠道成本 ${ (this.tab.uvNumTotal*this.tab.uvPriceAve).toFixed(1) || 0} `"
          :render-header="renderHeader2">
          <template slot-scope="scope">
             <span v-if="scope.row.settlementType===1">{{ scope.row.settlementPrice* scope.row.uvNum }} </span>
             <span v-if="scope.row.settlementType===0">{{  scope.row.settlementPrice*scope.row.settlementRegisterNum }} </span>
             <span v-if="scope.row.settlementType===2">{{ 0 }} </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="真实转化">
        <el-table-column
          align="center"
           width="110"
          :label="`注册|注册率 ${this.tab.registerNumTotal || 0} | ${this.tab.registerRateAve ? this.tab.registerRateAve+'%' : '-'}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span>{{scope.row.registerNum || 0}} | {{isNaN((scope.row.registerNum*100/scope.row.uvNum).toFixed(1)) ? '-' : ((scope.row.registerNum*100/scope.row.uvNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="`完善资料|总比率 ${this.tab.wanshanTotal || 0} | ${this.tab.wanshanRateAve ? this.tab.wanshanRateAve+'%' : '-'}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span>{{scope.row.perfectNum || 0}} | {{isNaN((scope.row.perfectNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.perfectNum*100/scope.row.registerNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          :label="`弹窗|弹窗比率|点击下载|总比率 ${this.tab.h5WindowTotal || 0} | ${this.tab.h5WindowRateAve ? this.tab.h5WindowRateAve+'%' : '-'} | ${this.tab.downTotal || 0} | ${this.tab.downRateAve ? this.tab.downRateAve+'%' : '-'}`"
          :render-header="renderHeader4">
          <template slot-scope="scope">
            <span>{{scope.row.h5WindowNum || 0}} | {{isNaN((scope.row.h5WindowNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.h5WindowNum*100/scope.row.registerNum).toFixed(1))+'%'}} | {{scope.row.dwNum || 0}} | {{isNaN((scope.row.dwNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.dwNum*100/scope.row.registerNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
           width="220"
          :label="`APP登录|App激活|激活率|总激活率 ${this.tab.loginNumTotal || 0} | ${this.tab.activeNumTotal || 0} | ${this.tab.activeNumRateAve ? this.tab.activeNumRateAve+'%' : '-'} | ${this.tab.activeNumRateTotal ? this.tab.activeNumRateTotal+'%' : '-'}`"
          :render-header="renderHeader4">
          <template slot-scope="scope">
            <span>{{scope.row.appLoginNum || 0}} | {{scope.row.appActivationNum || 0}} | {{isNaN((scope.row.appActivationNum*100/scope.row.dwNum).toFixed(1)) ? '-' : ((scope.row.appActivationNum*100/scope.row.dwNum).toFixed(1))+'%'}} | {{isNaN((scope.row.appActivationNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.appActivationNum*100/scope.row.registerNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
           width="150"
          :label="`产品用户数|比率|总比率 ${this.tab.productUserNumTotal || 0} | ${this.tab.productUserRateAve ? this.tab.productUserRateAve+'%' : '-'} | ${this.tab.productUserRateTotal ? this.tab.productUserRateTotal+'%' : '-'}`"
          :render-header="renderHeader3">
          <template slot-scope="scope">
            <span>{{scope.row.productUserNum || 0}} | {{isNaN((scope.row.productUserNum*100/scope.row.appActivationNum).toFixed(1)) ? '-' : ((scope.row.productUserNum*100/scope.row.appActivationNum).toFixed(1))+'%'}} | {{isNaN((scope.row.productUserNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.productUserNum*100/scope.row.registerNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
           width="120"
          :label="`产品UV数|比率 ${this.tab.productUserUvNumTotal || 0} | ${this.tab.productUserUvRateAve ? this.tab.productUserUvRateAve+'%' : '-'}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span>{{scope.row.productUvNum || 0}} | {{isNaN((scope.row.productUvNum*100/scope.row.productUserNum).toFixed(1)) ? '-' : ((scope.row.productUvNum*100/scope.row.productUserNum).toFixed(1))+'%'}}</span>
          </template>
        </el-table-column>
         <el-table-column
          align="center"
          :label="`产品uv收益 ${this.tab.channelPaTotalMoney + this.tab.channelUvTotalMoney }`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
            <span>{{scope.row.productPaTotalMoney + scope.row.productUvTotalMoney || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="`渠道盈亏 ${this.tab.channelProfit}`"
          :render-header="renderHeader2">
          <template slot-scope="scope">
             <span v-if="scope.row.settlementType">{{ scope.row.productPaTotalMoney + scope.row.productUvTotalMoney - scope.row.settlementPrice*scope.row.uvNum }} </span>
             <span v-else>{{ scope.row.productPaTotalMoney + scope.row.productUvTotalMoney- scope.row.settlementPrice*scope.row.settlementRegisterNum }} </span>
          </template>
        </el-table-column>

      </el-table-column>
    </el-table>
    <div class="clearfix pagination" style="margin-top:30px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import _channel from'@/services/channel.js'
export default {
  data() {
    return {
      newUserSwitch: false,
      // systemValue: '',
      // systemOptions: [{
      //   value: 'IOS',
      //   label: 'IOS'
      // }, {
      //   value: 'ANDROID',
      //   label: 'ANDROID'
      // }],
      dateValue: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      query: {
        pageNum: 1,
        pageSize: 30
      },
      totalNum: 0,
      tab: {
        registerPayTotal: 0,
        registerRateTotal: null,
        deductionRatioTotal: null,
        uvPriceAve: '',
        cpaPriceAve: '',
        uvNumTotal: 0,
        pvNumTotal: 0,
        registerNumTotal: '',
        registerRateAve: '',
        wanshanTotal: '',
        wanshanRateAve: '',
        downTotal: '',
        weibaTotal: '',
        downRateAve: '',
        weibaRateAve: '',
        loginNumTotal: '',
        activeNumTotal: '',
        activeNumRateAve: '',
        activeNumRateTotal: '',
        productUserNumTotal: '',
        productUserRateAve: '',
        productUserRateTotal: '',
        productUserUvNumTotal: '',
        productUserUvRateAve: '',
        h5WindowTotal:'',
        h5WindowRateAue:'',
        channelPaTotalMoney:'',
        channelUvTotalMoney:'',
        channelProfit:''
      },
      loading: false,
      tableData: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getStatistic()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getStatistic()
    },
    // 仅看新用户开关
    newUserSwitchChange(val){
      this.getStatistic()
    },
    // 切换系统
    // systemChange(val){
    //   console.log(this.systemValue)
    // },
    renderHeader2(createElement, { column, _self }) {
      console.log(createElement) //  function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
      const label = column.label     
      const labelArr = label.split(' ') 
      console.log('labelArr', labelArr)
      return createElement(
        'span',     //创建最外层的标签可随意
        [
          createElement('span', {  // 创建第一个元素的标签可随意
            attrs: { type: 'text' } 
          },[labelArr[0]]), 
          createElement('p', {  // 创建第二个元素的标签可随意 
            attrs: { type: 'text', style: 'font-size:12px; font-weight:bold; color: #999999;' } // 给分割的某个元素单独加样式
          }, [labelArr[1], ' ', labelArr[2], ' ', labelArr[3]])
        ]
      )
    },
    renderHeader3(createElement, { column, _self }) {
      console.log(createElement) //  function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
      const label = column.label     
      const labelArr = label.split(' ') 
      console.log('labelArr', labelArr)
      return createElement(
        'span',     //创建最外层的标签可随意
        [
          createElement('span', {  // 创建第一个元素的标签可随意
            attrs: { type: 'text' } 
          },[labelArr[0]]), 
          createElement('p', {  // 创建第二个元素的标签可随意 
            attrs: { type: 'text', style: 'font-size:12px; font-weight:bold; color: #999999;' } // 给分割的某个元素单独加样式
          }, [labelArr[1], ' ', labelArr[2], ' ', labelArr[3], ' ', labelArr[4], ' ', labelArr[5]])
        ]
      )
    },
    renderHeader4(createElement, { column, _self }) {
      console.log(createElement) //  function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
      const label = column.label     
      const labelArr = label.split(' ') 
      console.log('labelArr', labelArr)
      return createElement(
        'span',     //创建最外层的标签可随意
        [
          createElement('span', {  // 创建第一个元素的标签可随意
            attrs: { type: 'text' } 
          },[labelArr[0]]), 
          createElement('p', {  // 创建第二个元素的标签可随意 
            attrs: { type: 'text', style: 'font-size:12px; font-weight:bold; color: #999999;' } // 给分割的某个元素单独加样式
          }, [labelArr[1], ' ', labelArr[2], ' ', labelArr[3], ' ', labelArr[4], ' ', labelArr[5], ' ', labelArr[6], ' ', labelArr[7]])
        ]
      )
    },
    // 日期改变
    dateChange(val){
      console.log('dateValue', this.dateValue)
      this.getStatistic()
    },
    // 刷新按钮
    refreshClick(){
      this.getStatistic()
    },
    getStatistic(){
      this.loading = true
      let params = {
        "isNewUser": this.newUserSwitch ? 1 : 0,
        "pageNum": this.query.pageNum,
        "pageSize": this.query.pageSize,
        // "platform": "string",
        "searchDate": this.dateValue
      }
      _channel.getChannelStatistic(params)
      .then(res => {
        this.tableData = res.data.list || []
        this.tab.registerPayTotal = 0
        this.tab.uvNumTotal = 0
        this.tab.pvNumTotal = 0
        this.tab.registerNumTotal = 0
        this.tab.registerRateAve = 0
        this.tab.registerRateTotal = 0
        this.tab.deductionRatioTotal = 0
        this.tab.uvPriceAve = 0
        this.tab.cpaPriceAve = 0
        this.tab.wanshanTotal = 0
        this.tab.wanshanRateAve = 0
        this.tab.downTotal = 0
        this.tab.downRateAve = 0
        this.tab.loginNumTotal = 0
        this.tab.activeNumTotal = 0
        this.tab.activeNumRateAve = 0
        this.tab.productUserNumTotal = 0
        this.tab.productUserUvNumTotal = 0
        this.tab.productUserUvRateAve = 0
        this.tab.productUserRateAve = 0
        this.tab.productUserRateTotal = 0
        this.tab.h5WindowTotal = 0
        this.tab.h5WindowRateAve = 0
        this.tab.channelPaTotalMoney = 0
        this.tab.channelUvTotalMoney = 0
        this.tab.channelProfit = 0
        let settlementPrice = 0
        if(this.tableData.length > 0){
           this.tableData.forEach((item, index) => {
             this.tab.registerPayTotal += Number(item.settlementRegisterNum)
             this.tab.uvNumTotal += Number(item.uvNum)
             this.tab.pvNumTotal += Number(item.pvNum)
             this.tab.registerNumTotal += Number(item.registerNum)
            //  settlementPrice += Number(item.settlementPrice)
             this.tab.wanshanTotal += Number(item.perfectNum)
             this.tab.downTotal += Number(item.dwNum)
             this.tab.loginNumTotal += Number(item.appLoginNum)
             this.tab.activeNumTotal += Number(item.appActivationNum)
             this.tab.productUserNumTotal += Number(item.productUserNum)
             this.tab.productUserUvNumTotal += Number(item.productUvNum)
             this.tab.h5WindowTotal += Number(item.h5WindowNum)
             this.tab.channelPaTotalMoney += Number(item.productPaTotalMoney)
            //  this.tab.channelUvTotalMoney += Number(item.productUvTotalMoney)
             if(item.settlementType){
              this.tab.uvPriceAve += Number(item.settlementPrice*item.uvNum)
             }else{
              this.tab.uvPriceAve += Number(item.settlementPrice*item.settlementRegisterNum)
             }
             this.tab.cpaPriceAve += Number(item.settlementPrice*item.settlementRegisterNum)
           })
           if(isNaN((this.tab.registerNumTotal*100/this.tab.uvNumTotal).toFixed(1))){
              this.tab.registerRateAve = 0
            }else{
              this.tab.registerRateAve = (this.tab.registerNumTotal*100/this.tab.uvNumTotal).toFixed(1)
            }
            if(isNaN((this.tab.registerPayTotal*100/this.tab.uvNumTotal).toFixed(1))){
              this.tab.registerRateTotal = 0
            }else{
              this.tab.registerRateTotal = (this.tab.registerPayTotal*100/this.tab.uvNumTotal).toFixed(1)
            }
            if(isNaN(((this.tab.registerNumTotal-this.tab.registerPayTotal)*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.deductionRatioTotal = 0
            }else{
              this.tab.deductionRatioTotal = ((this.tab.registerNumTotal-this.tab.registerPayTotal)*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部uv单价
            this.tab.uvPriceAve = isFinite((this.tab.uvPriceAve/this.tab.uvNumTotal).toFixed(1)) ? (this.tab.uvPriceAve/this.tab.uvNumTotal).toFixed(1) : '-'
            // 头部cpa单价
            this.tab.cpaPriceAve = isFinite((this.tab.cpaPriceAve/this.tab.registerPayTotal).toFixed(1)) ? (this.tab.cpaPriceAve/this.tab.registerPayTotal).toFixed(1) : '-'
            // 头部完善资料总比率
            if(isNaN((this.tab.wanshanTotal*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.wanshanRateAve = 0
            }else{
              this.tab.wanshanRateAve = (this.tab.wanshanTotal*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部点击下载总比率
            if(isNaN((this.tab.downTotal*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.downRateAve = 0
            }else{
              this.tab.downRateAve = (this.tab.downTotal*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部弹窗总比率
            if(isNaN((this.tab.h5WindowTotal*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.h5WindowRateAve = 0
            }else{
              this.tab.h5WindowRateAve = (this.tab.h5WindowTotal*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部激活率
            if(isNaN((this.tab.activeNumTotal*100/this.tab.downTotal).toFixed(1))){
              this.tab.activeNumRateAve = 0
            }else{
              this.tab.activeNumRateAve = (this.tab.activeNumTotal*100/this.tab.downTotal).toFixed(1)
            }
            // 头部总激活率
            if(isNaN((this.tab.activeNumTotal*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.activeNumRateTotal = 0
            }else{
              this.tab.activeNumRateTotal = (this.tab.activeNumTotal*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部产品UV数比率
            if(isNaN((this.tab.productUserUvNumTotal*100/this.tab.productUserNumTotal).toFixed(1))){
              this.tab.productUserUvRateAve = 0
            }else{
              this.tab.productUserUvRateAve = (this.tab.productUserUvNumTotal*100/this.tab.productUserNumTotal).toFixed(1)
            }
            // 头部产品用户数比率
            if(isNaN((this.tab.productUserNumTotal*100/this.tab.activeNumTotal).toFixed(1))){
              this.tab.productUserRateAve = 0
            }else{
              this.tab.productUserRateAve = (this.tab.productUserNumTotal*100/this.tab.activeNumTotal).toFixed(1)
            }
            // 头部产品用户数总比率
            if(isNaN((this.tab.productUserNumTotal*100/this.tab.registerNumTotal).toFixed(1))){
              this.tab.productUserRateTotal = 0
            }else{
              this.tab.productUserRateTotal = (this.tab.productUserNumTotal*100/this.tab.registerNumTotal).toFixed(1)
            }
            // 头部渠道利润
            // if(isNaN((this.tab.channelPaTotalMoney+this.tab.channelUvTotalMoney - this.tab.uvNumTotal*this.tab.uvPriceAve ).toFixed(1))){
            //   this.tab.channelProfit = 0
            // }else{
            //   this.tab.channelProfit = (this.tab.channelPaTotalMoney+this.tab.channelUvTotalMoney - this.tab.uvNumTotal*this.tab.uvPriceAve ).toFixed(1)
            // }
           
        }
        this.totalNum = res.data.total
        this.loading = false
        console.log('res', res.data)
      })
    }
  },
  created(){
    this.dateValue = this._mapping.date_format2(new Date())
    this.getStatistic()
  }
}
</script>
<style lang="scss" scoped>
</style>